<template>
  <view class="app-container">
    <image class="background" src="/static/images/background.png" mode="aspectFill"></image>

    <view class="bar-box" :style="{ marginTop: titleMargin + 'px' }">
      <image class="back" src="/static/images/back.png" @click="back"></image>
      <view class="title">关注我的</view>
    </view>
    <scroll-view enable-flex scroll-y @scrolltolower="loadMore" class="list-box">
      <view class="info-box" @click="goUserDetail(item.user_id)" v-for="(item, index) in list" :key="item.id">
        <view class="info">
          <image class="avatar" mode="aspectFill" :src="item.avatar"></image>
          <view class="right">
            <view class="line">
              <view class="name">{{ item.username }}</view>
              <image class="sex-img" mode="aspectFill" :src="item.gender == '男' ? '/static/images/sex1.png' : '/static/images/sex2.png'"></image>
            </view>
            <view class="line" v-if="item.residence">
              {{ item.residence }}
            </view>
            <view class="line">
              <view class="icon" v-if="item.age">{{ item.age }}岁</view>
              <view class="icon" v-if="item.height">{{ item.height }}cm</view>
            </view>
            <view class="line">
              <view class="icon" v-if="iteusem.marital_status">{{ item.marital_status }}</view>
              <view class="icon" v-if="item.annual_income">{{ item.annual_income }}</view>
            </view>

            <block v-if="item.hobby != null">
              <view class="line text">爱好：</view>
              <view class="hobby-box">
                {{ item.hobby_str }}
              </view>
            </block>
          </view>
        </view>
        <view class="find" v-if="item.xm_str">
          <view class="text">寻觅：</view>
          <view>{{ item.xm_str }}</view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      titleMargin: 0, // 动态顶部间距
      list:[],
      page: 1,
      pagesize: 10
    };
  },
  created() {
    this.setDynamicMargin(); // 设置动态间距
  },

  onLoad: function () {
    uni.hideShareMenu();

    var user_id = uni.getStorageSync('user_id');
    if (user_id) this.followList();
  },

  methods: {
    setDynamicMargin() {
      const windowInfo = uni.getWindowInfo();
      this.titleMargin = windowInfo.statusBarHeight + 10; // 直接使用状态栏高度
    },

    back: function (){
      uni.navigateBack();
    },

    goUserDetail: function (user_id){
      uni.navigateTo({
        url: '/pages/user_details/user_details?user_id=' + user_id
      })
    },

    loadMore: function () {
      this.followList(this.page + 1);
    },

    followList: function (incPage = 0) {
      var page = incPage ? incPage : this.page;

      uni.showLoading({
        title: '数据加载中...',
        mask: true
      })

      this.$http.post('/index/Api/followList', {
        user_id: uni.getStorageSync('user_id'),
        type: 2,
        page: page,
        pagesize: this.pagesize
      }).then((res) => {
        if (res.data.result == 1) {
          if (page == 1) {
            this.list = res.data.data;
          } else {
            // 加载更多
            var list = this.list;

            for (var i = 0; i < res.data.data.length; i++) {
              list.push(res.data.data[i]);
            }

            this.list = list;
            this.page = page;
          }

          setTimeout(() => {
            uni.hideLoading();
          }, 500)
        } else {
          if (page == 1) this.list = [];

          uni.hideLoading();
          this.$common.doErrorResult(res);
        }
      })
    },
  },
}
</script>

<style lang="scss">
.app-container {
  display: flex;
  flex-direction: column;
  align-items: center;

  .list-box {
    width: 100%;
    height: 83vh;
    margin-top: 40rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    .info-box {
      background: $main-background;
      border-radius: 20rpx;
      width: calc(100% - 80rpx);
      padding: 20rpx;
      margin-bottom: 20rpx;

      .info {
        display: flex;
        justify-content: space-between;

        .avatar {
          width: 340rpx;
          height: 340rpx;
          flex-shrink: 0;
          border-radius: 20rpx;
        }

        .right {
          width: calc(100% - 400rpx);
          display: flex;
          flex-direction: column;

          .line {
            display: flex;
            justify-content: space-between;
            margin-top: 17rpx;
            width: 100%;

            .name {
              font-size: 40rpx;
              font-weight: bold;
            }

            .sex-img {
              width: 46rpx;
              height: 46rpx;
            }

            .icon {
              font-size: 24rpx;
              padding: 2rpx 20rpx;
              border: 2rpx solid $main-color;
              border-radius: 40rpx;
              color: #B43C33;
            }
          }

          .hobby-box {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
        }
      }
      .find{
        display: flex;
        align-items: center;
        margin-top: 20rpx;
      }
    }
  }
}
</style>

